<template>
  <div>
    <h1>分类列表</h1>
    <div class="typeList">
      <Item title="图片">
        <!-- 
          在使用组件时，在标签内部书写接结构，就是传递给组件的插槽
         -->
        <img src="./assets/u=962361882,2281204904&fm=253&fmt=auto&app=138&f=JPEG.webp" style="width:100%" alt="">
      </Item>
      <Item title="音乐">
        <ul>
          <li>下课</li>
          <li>放学</li>
        </ul>
      </Item>
      <Item title="视频">
        <video src=""></video>
      </Item>
    </div>
  </div>
</template>

<script>
import Item from "./components/Item";
export default {
  name: "App",
  components: {
    Item,
  },
  data() {},
};
</script>

<style scoped>
.typeList {
  display: flex;
  justify-content: space-around;
}
</style>
